<template>
<div class="login">
     <div v-if="getList.length!=0">
         <div v-for="(v,index) in getList" :key="index" >
      <van-card
        :num="v.count"
        :price="v.age"
        :desc="v.name"
    :title="v.phone"
     :thumb="v.avaUrl"

>
 
  <template #footer>
    <van-button size="mini"  @click="jian(v)" color="#dfdbd7" round type="info">-</van-button>
    <input type="text" v-model="v.count" @change="change(v)" class="input">
    <van-button size="mini" @click="add(v)" color="#dfdbd7" round type="info">+</van-button>
  </template>
</van-card>
         </div>
         <van-submit-bar :price="3050" button-text="提交订单"  class="dingdan"/>
</div>

    
    <!-- <div v-if="getList.length!=0">
        <div v-for="(v,index) in getList" :key="index" class="l1">
            <img :src="v.avaUrl" class="img">
            <p>{{v.name}}</p>
            <p>{{v.phone}}</p>
          
            <button @click="jian(v)">-</button>
        <input type="text" v-model="v.count" @change="change(v)" class="input">
        <button @click="add(v)">+</button>
        </div>
        
    </div> -->
    
    <div v-if="getList.length==0">
        <h1>购物车空空如也</h1>
    </div>
    <!-- <div class="login">
        用户名:<input type="text" v-model="uname">
        密码：<input type="text" v-model="pass">
        <mt-button size="small" @click="send()">添加</mt-button>
    </div>
    <div>
        <table class="">
            <tr v-for="(v,index) in arr" :key="index">
                <td>{{v.name}}</td>
                <td>{{v.pass}}</td>
            </tr>
        </table>
    </div> -->
    </div>
</template>
<script>
import { MessageBox } from 'mint-ui';
export default {
    name:"login",
    data(){
        return{
           uname:"",
           pass:"",
           arr:[],
           
        }
    },
   computed:{
      getCont:{

          get(){
            return this.$store.state.count;
          },

          set(v){
              this.$store.commit("change",v);
          }
            
        },
        getList:{
            get(){
                return this.$store.state.list;
            }
        },
        getAllCount(){
            return this.$store.state.alllCount;
        }
    },
    methods:{
        jian(v){
            if(v.count<=1){
                MessageBox.confirm('确定删除吗？').then(action => {
                this.$store.commit("jia",v);
                }).catch(e=>{});
            }else{
                 this.$store.commit("jia",v);
            }
        },
        add(v){
           
            this.$store.commit("pre",v);
        },
        change(v){
            if(v.count>200){
               v.count = 200;
               this.$store.commit("che",v);
            }else{
                this.$store.commit("che",v);
            }
        },
        send(){
            var obj={
                name:this.uname,
                pass:this.pass,
                isCheck:false,
            }
            this.arr.push(obj);
            this.uname="";
            this.pass="";
        }
    },

   
        
}
</script>
<style scoped>
.login{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color:  #e2fafa!important ;
    margin-top: 20px;
    
}

.img{
       width: 200px;
    height: 200px;
    float: left;
    margin-left: 40px;
}
.input{
    width: 25px;
}

.dingdan{
    margin-bottom: 55px;
}
</style>